<template>
	<!--重大项目现状分析功能-->
	<div class="project-status">
		<div class="status-left">
			<normal-block chartID="chart1" title="重点项目分布" chartType="getStackBar" titleType="blueBig" height="100%">
				<template>
					<div class="contentBox">
						<div class="mapBox">
							<mapv-block :pointList="pointList" :center="center" :zoom="zoom" showMarker="xmfxzdxm"></mapv-block>
						</div>
						<div class="listBox">
							<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage" @cellClick="cellClick"></table-block>
						</div>
					</div>
				</template>
			</normal-block>
		</div>
		<div class="status-right">
			<normal-block :title="BarAndLineOptionData.title" style="height:60.5vh">
				<div class="items1 itemBox">
					<chart-block chartID="chart1" height="25vh" :title="BarAndLineOptionData.title" titleType="blueBig" :optionData="BarAndLineOptionData" chartType="getBarAndLine" :is-background="false" :is-title="false"></chart-block>
				</div>
				<div class="items2 itemBox">
					<chart-block chartID="chart2" height="25vh" :title="PieLightOptionDataL.title" titleType="blueBig" :optionData="PieLightOptionDataL" chartType="getPielight" :is-background="false" style="margin-top:1vh;width:50%" :dispatchData="dispatchDataL" @mouseover="AmouseoverL" @mouseout="AmouseoutL"></chart-block>
					<chart-block chartID="chart3" height="25vh" :title="PieLightOptionDataR.title" titleType="blueBig" :optionData="PieLightOptionDataR" chartType="getPielight" :is-background="false" style="margin-top:1vh;width:50%" :dispatchData="dispatchDataR" @mouseover="AmouseoverR" @mouseout="AmouseoutR"></chart-block>
				</div>
			</normal-block>
			<div class="items3 itemBox">
				<chart-block chartID="chart4" height="22vh" :title="barBlockOptionDate.title" titleType="blueBig" :optionData="barBlockOptionDate" chartType="getBarBlock" style="margin-top:1.5vh"></chart-block>
			</div>
		</div>
	</div>
</template>

<script>
import {getCommonData, getCommonData2, getCommonData3, getCommonData4, getCommonData5} from '@/api/pages.js'

export default {
	name: "project-status",
	components: {
		NormalBlock: () => import('@/components/normal-block'),
		ChartBlock: () => import('@/components/chart-block'),
		TableBlock: () => import('@/components/table-block'),
		MapvBlock: () => import('@/components/mapv-block')
	},
	props: {},
	data() {
		return {
			BarAndLineOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#4CC4FC',
						bottomColor: '#3056F7'
					},
				],
				LineCircleColor: "#F18C27",//折线图颜色
				LineCircleBorderColor: "#eae73c",//折线图描边颜色
			},
			PieLightOptionDataL: {},
			PieLightOptionDataR: {},
			barBlockOptionDate: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				BarGradientColor: {//渐变色
					topColor: '#4383ec',
					bottomColor: '#09fec3'
				},
				colorList: ['#3f6af2', '#3f6af2'] //排名标号的背景颜色[前五名,五名以后]
			},
			pageSize: 4,
			total: 0,
			pageIndex: 1,
			oprData: {
				list: [],
				tableData: [],
			},
			busiCode: 'P001',
			pointList: [],
			center: {lng: 119.140177, lat: 35.56202},
			zoom: 9,
			dispatchDataL: {},
			dispatchDataR: {},
			MaxindexL: 0,
			MaxindexR: 0,
			currePage: 1
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getCommonData('P001', this.pageIndex, this.pageSize)
		this.getCommonData2('E001')
		this.getCommonData3('E002')
		this.getCommonData4('E003')
		this.getCommonData5('C001')
		this.getCommonData6('E119')
	},
	methods: {
		// 项目列表接口
		getCommonData(busiCode, current, size) {
			getCommonData(busiCode, current, size).then(res => {
				if (res.data.code === 200) {
					this.oprData.tableData = res.data.data.tableData
					this.oprData.list = res.data.data.list.records
					this.total = res.data.data.list.total
				}
			}).catch(err => {

			})
		},
		// 最近5年项目重大变化
		getCommonData2(busiCode) {
			getCommonData2(busiCode).then(res => {
				if (res.data.code === 200) {
					this.BarAndLineOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						LinearGradientColor: [//柱状图渐变色
							{
								topColor: '#4CC4FC',
								bottomColor: '#3056F7'
							},
						],
						LineCircleColor: "#F18C27",//折线图颜色
						LineCircleBorderColor: "#eae73c",//折线图描边颜色
					}
				}
			}).catch(err => {

			})
		},
		// 最近5年的重大项目类别占比
		getCommonData3(busiCode) {
			getCommonData3(busiCode).then(res => {
				if (res.data.code === 200) {
					var MaxArr = []
					let _this = this
					res.data.data.seriesData[0].data.forEach((item, index, arr) => {
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for (let i = 0; i < MaxArr.length; i++) {
						if (MaxArr[i] === MaxData) {
							_this.MaxindexL = i
						}
					}
					this.dispatchDataL = {
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.MaxindexL
					}
					this.PieLightOptionDataL = {
						title: res.data.data.title,
						color: [//图表颜色 c1为渐变开始颜色，c2为渐变结束颜色
							{c1: '#ECB41B', c2: '#E1F843'},
							{c1: '#2D87F2', c2: '#7CCCFE'},
							{c1: '#24AC67', c2: '#4EF3A0'},
							{c1: '#ffaa00', c2: '#4EF3A0'},
							{c1: '#aa557f', c2: '#aa5500'},
							{c1: '#ff55ff', c2: '#782878'},
							{c1: '#aa5500', c2: '#fc7e00'},
							{c1: '#5500ff', c2: '#3d00b8'},
							{c1: '#aaff7f', c2: '#77b158'},
							{c1: '#aaaa00', c2: '#e7e700'},
							{c1: '#0000ff', c2: '#4EF3A0'}
						],
						seriesData: res.data.data.seriesData[0].data,
						right: '0%',
						pieRadius: ['25%', '50%'],
						radius: '70%',
						center: ['30%', '50%'],
						labelShow: false,//默认lable是否显示
						position: 'center',//lable位置,center/left
						emphasisLable: true,//鼠标悬停lable是否显示
						pieSelect: true
					}
				}
			}).catch(err => {
			})
		},
		//项目建设类型分布
		getCommonData6(busiCode) {
			getCommonData3(busiCode).then(res => {
				if (res.data.code === 200) {
					var MaxArr = []
					let _this = this
					res.data.data.seriesData[0].data.forEach((item, index, arr) => {
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for (let i = 0; i < MaxArr.length; i++) {
						if (MaxArr[i] === MaxData) {
							_this.MaxindexR = i
						}
					}
					this.dispatchDataR = {
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.MaxindexR
					}
					this.PieLightOptionDataR = {
						title: res.data.data.title,
						color: [//图表颜色 c1为渐变开始颜色，c2为渐变结束颜色
							{c1: '#ECB41B', c2: '#E1F843'},
							{c1: '#2D87F2', c2: '#7CCCFE'},
							{c1: '#24AC67', c2: '#4EF3A0'},
							{c1: '#ffaa00', c2: '#4EF3A0'},
							{c1: '#aa557f', c2: '#aa5500'},
							{c1: '#ff55ff', c2: '#782878'},
							{c1: '#aa5500', c2: '#fc7e00'},
							{c1: '#5500ff', c2: '#3d00b8'},
							{c1: '#aaff7f', c2: '#77b158'},
							{c1: '#aaaa00', c2: '#e7e700'},
							{c1: '#0000ff', c2: '#4EF3A0'}
						],
						seriesData: res.data.data.seriesData[0].data,
						right: '6%',
						pieRadius: ['25%', '50%'],
						radius: '70%',
						center: ['35%', '50%'],
						labelShow: false,//默认lable是否显示
						position: 'center',//lable位置,center/left
						emphasisLable: true,//鼠标悬停lable是否显示
						pieSelect: true
					}
				}
			}).catch(err => {
			})
		},
		// 最近5年项目数量行业TOP5
		getCommonData4(busiCode) {
			getCommonData4(busiCode).then(res => {
				if (res.data.code === 200) {
					let seriredata = []
					res.data.data.categoryAxis.forEach((item, index, arr) => {
						seriredata.push({name: item, value: res.data.data.seriesData[0].data[index]})
					})
					this.barBlockOptionDate = {
						title: res.data.data.title,
						total: Math.max(...res.data.data.seriesData[0].data),//总数计算百分比
						BarGradientColor: {//渐变色
							topColor: '#4383ec',
							bottomColor: '#09fec3'
						},
						left: 200,//距离左侧位置
						seriesData: seriredata,
						colorList: ['#3f6af2', '#3f6af2'] //排名标号的背景颜色[前五名,五名以后]
					}
				}
			}).catch(err => {

			})
		},
		// 重点项目分布
		getCommonData5(busiCode) {
			getCommonData5(busiCode).then(res => {
				if (res.data.code === 200) {
					let mapData = []
					var lng = 0
					var lat = 0
					res.data.data.list.forEach((item, index, arr) => {
						mapData.push({
							name: item.projectName,
							lng: item.logtitude,
							lat: item.latitude,
							id: item.projectId,
							sfzdxm: item.sfzdxm
						})
						lng += parseFloat(item.logtitude) / res.data.data.list.length
						lat += parseFloat(item.latitude) / res.data.data.list.length
					})
					this.pointList = mapData
					this.center.lng = lng
					this.center.lat = lat
				}
			}).catch(err => {

			})
		},
		AmouseoverL(e) {
			let _this = this
			if (e.dataIndex != this.MaxindexL)
				this.dispatchDataL = {
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: _this.MaxindexL
				}
		},
		AmouseoutL(e) {
			let _this = this
			// this.Maxindex = e.dataIndex;
			this.dispatchDataL = {
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: _this.MaxindexL
			}
		},
		AmouseoverR(e) {
			let _this = this
			if (e.dataIndex != this.MaxindexR)
				this.dispatchDataR = {
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: _this.MaxindexR
				}
		},
		AmouseoutR(e) {
			let _this = this
			// this.Maxindex = e.dataIndex;
			this.dispatchDataR = {
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: _this.MaxindexR
			}
		},
		// 分页事件
		currentChange(e) {
			this.currePage = e
			this.getCommonData('P001', e, this.pageSize)
		},
		cellClick(row) {
			console.log(row)
			this.$router.push({
				path: '/projects/detail',
				query: {
					projectId: row.row.projectId
				}
			});
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.project-status {
	width: 100%;
	height: 100%;
	padding: 6vh 1.3vw 4vh;
	overflow: hidden;

	.status-left {
		width: 57.5vw;
		height: 84vh;
		float: left;

		.contentBox {
			width: 100%;
			height: 100%;
			padding: 1.3vh 2.5vh;
			box-sizing: border-box;

			.mapBox {
				width: 100%;
				height: 53.1vh;
				margin-bottom: 2vh;
			}

			.listBox {
				width: 100%;
				height: 26vh;
				overflow-y: auto;
			}
		}

	}

	.status-right {
		width: 37.5vw;
		float: right;

		.itemBox {
			width: 100%;
			height: 28vh;
			display: flex;
		}

		.itemBox:last-child {
			margin-bottom: 0
		}
	}
}

.bm-view {
	height: 100%;
}
</style>

